<template>
  <!-- 详细页 -->
  <view class="look">
    <swiper circular>
      <swiper-item v-for="item in 5" :key="item">
        <image
          @click="isShow"
          mode="scaleToFill"
          src="/static/wallpaper/preview1.jpg"
        ></image
      ></swiper-item>
    </swiper>

    <view class="show" v-show="show">
      <!-- 返回 -->
      <view class="to-back" @click="toBack">
        <uni-icons type="back" size="30" color="white"></uni-icons>
      </view>

      <!-- 图片.length -->
      <view class="num">7 / 12</view>

      <!-- 时间 -->
      <view class="time">
        <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
      </view>

      <!-- 日期 -->
      <view class="date">
        <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
      </view>

      <!-- 图片相关信息 -->
      <view class="about">
        <view class="box" @click="toInfo">
          <uni-icons type="info" size="30" color="white"></uni-icons>
          <text>信息</text>
        </view>
        <view class="box" @click="pingFen">
          <uni-icons type="star" size="30" color="white"></uni-icons>
          <text>5分</text>
        </view>
        <view class="box">
          <uni-icons type="download" size="30" color="white"></uni-icons>
          <text>下载</text>
        </view>
      </view>
    </view>

    <!-- 图片信息遮罩层 -->
    <uni-popup
      ref="TuInfo"
      type="bottom"
      border-radius="10px 10px 0 0"
      background-color="#fff"
    >
      <view class="info">
        <view class="title">壁纸信息</view>
        <!-- 返回 -->
        <view class="info-back" @click="closeInfo">
          <uni-icons type="closeempty" size="30"></uni-icons>
        </view>
        <!-- 壁纸id -->
        <view class="info-id">
          <view class="info-title">壁纸ID:</view>
          <text selectable class="right">114514</text>
        </view>
        <!-- 分类 -->
        <view class="info-fen">
          <view class="info-title">分类:</view>
          <text selectable class="right color">明星美女</text>
        </view>
        <!-- 发布信息 -->
        <view class="info-fa">
          <view class="info-title">发布者:</view>
          <text selectable class="right">114514</text>
        </view>
        <!-- 评分 -->
        <view class="info-ping-fen">
          <view class="info-title">评分:</view>

          <view class="right">
            <uni-rate readonly touchable value="5"></uni-rate>
            <text>5分</text>
          </view>
        </view>
        <!-- 摘要 -->
        <view class="info-zhai">
          <view class="info-title">摘要:</view>
          <text selectable class="right">
            本图片来自用户投稿,非商业使用,用于免费学习交流,如侵犯了您的权益，可联系管理员：JavaScript159进行删除</text
          >
        </view>
        <!-- 标签 -->
        <view class="info-biao">
          <view class="info-title">标签:</view>
          <view class="right">
            <uni-tag
              :circle="true"
              :inverted="true"
              text="美女"
              type="success"
            />
            <uni-tag
              :circle="true"
              :inverted="true"
              text="二次元"
              type="success"
            />
          </view>
        </view>
        <!-- 声明 -->
        <view class="info-sheng">
          <text selectable>
            声明:
            本图片来自用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，可联系管理员：JavaScript159进行删除
          </text>
        </view>
      </view>
    </uni-popup>

    <!-- 评分遮罩层 -->
    <uni-popup
      :is-mask-click="false"
      ref="rateValue"
      type="center"
      border-radius="10px 10px 0 0"
    >
      <view class="rate">
        <view class="rate-title">壁纸信息</view>
        <!-- 关闭图标 -->
        <view class="rate-close" @click="closePingFen">
          <uni-icons type="closeempty" size="30"></uni-icons>
        </view>
        <!-- 评分UI组件 -->
        <view class="rate-fen">
          <uni-section
            title="半星"
            subTitle="使用 allow-half 属性设置是否显示半星"
            type="line"
            padding
          >
            <uni-rate allow-half v-model="TuInfot" />
          </uni-section>
          <view>{{ TuInfot }}分</view>
        </view>
        <!-- 按钮 -->
        <button :disabled="!TuInfot" plain @click="tijiao">确认评分</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
const show = ref(true); //显示隐藏
const TuInfo = ref(true); //图片信息遮罩层;
const TuInfot = ref(0); //评分分数;
const rateValue = ref(null); //评分遮罩层;

// 显示隐藏
const isShow = () => {
  show.value = !show.value;
  console.log("显示隐藏");
};

// 返回上一级;
const toBack = () => {
  uni.navigateBack();
  console.log("返回上一级");
};

// 图片信息遮罩层
const toInfo = () => {
  TuInfo.value.open();
  console.log("打开图片信息遮罩层");
};
// 关闭图片信息遮罩层
const closeInfo = () => {
  TuInfo.value.close();
  console.log("关闭图片信息遮罩层");
};

// 评分模块
const pingFen = () => {
  rateValue.value.open();
  console.log("打开评分模块", rateValue.value);
};

// 关闭评分模块
const closePingFen = () => {
  rateValue.value.close();
  console.log("关闭评分模块");
};

// 提交评分
const tijiao = () => {
  console.log("提交评分");
};
</script>

<style scoped lang="scss">
.look {
  width: 100%;
  height: 100vh;
  // border: 1px solid red;

  swiper {
    width: 100%;
    height: 100%;

    swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .show {
    .to-back {
      position: absolute;
      top: 80rpx;
      left: 20rpx;
      width: fit-content;
      border-radius: 50%;
      border: 1rpx solid white;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .num {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: fit-content;
      margin: 20vw auto;
      border-radius: 30rpx;
      padding: 5rpx 20rpx;
      color: white;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .time {
      position: absolute;
      top: 25vw;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: white;
      font-size: 150rpx;
    }

    .date {
      position: absolute;
      top: 50vw;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: white;
    }

    .about {
      position: absolute;
      bottom: 10vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-around;
      width: 400rpx;
      border-radius: 40rpx;
      background-color: rgba(255, 255, 255, 0.5);

      .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx;

        text {
          width: fit-content;
          color: white;
        }
      }
    }
  }

  .info {
    position: relative;
    max-height: 60vh;
    padding: 20rpx;
    font-family: 微软雅黑;

    //盒子左边统一样式
    .info-title {
      flex: 1;
      margin-right: 20rpx;
      text-align: right;
    }
    //右边统一样式
    .right {
      flex: 5;

      uni-tag {
        margin-left: 10rpx;
      }
    }

    .title {
      width: fit-content;
      margin: 0 auto;
    }

    .info-back {
      position: absolute;
      top: 0;
      right: 20rpx;
      padding: 10rpx;
    }

    .info-id {
      display: flex;
    }

    .info-fen {
      display: flex;
      .color {
        color: #93e1ff;
      }
    }

    .info-fa {
      display: flex;
    }

    .info-ping-fen {
      display: flex;

      .right {
        display: flex;
      }
    }

    .info-zhai {
      display: flex;
    }

    .info-biao {
      display: flex;
    }

    .info-sheng {
      padding: 10rpx;
      border-radius: 10rpx;
      background-color: rgba(128, 128, 128, 0.1);
    }
  }

  // info类所有子元素
  .info > view {
    margin: 20rpx auto;
    // border: 1px solid red;
  }

  .rate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 530rpx;
    height: 330rpx;
    border-radius: 30rpx;
    background-color: white;

    .rate-title {
      width: fit-content;
      margin: 0 auto;
      color: gray;
    }

    .rate-close {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
    }

    .rate-fen {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: fit-content;
      margin: 0 auto;
      color: rgb(255, 202, 62);
    }
  }
}
</style>